<template>
  <div>
    <div class="wrap">
      <div class="user_login">
        <img
          v-if="env === 'local'"
          class="logo"
          src="../../assets/images/logo.png"
          alt=""
        />
        <img
          v-else
          class="logo"
          src="../../assets/images/login_bg.png"
          alt=""
          style="height:112px;"
        />
        <div class="input_container">
          <h2 v-if="env === 'local'">中央成绩系统</h2>
          <h2 v-else>XXXXXX</h2>
          <input
            type="text"
            class="inputName"
            placeholder="用户名"
            ref="username"
            @keyup.enter="handleLogin"
            v-model.trim="username"
          />
          <input
            type="password"
            class="password_class"
            placeholder="密码"
            ref="password"
            @keyup.enter="handleLogin"
            v-model.trim="password"
          />
          <JcRange
            ref="verify"
            :status="status"
            @reset="resetRange"
            :successFun="successFun"
            :errorFun="errorFun"
          >
          </JcRange>
        </div>
        <div class="login_button_container">
          <el-button type="primary" @click="handleLogin" :loading="btnLoading"
            >登 录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import { mapMutations } from 'vuex'
    import JcRange from './components/JcRange'
    import session from '../../utils/session'
    import mixinCommon from '@/mixin/common'
    export default {
        mixins: [mixinCommon],
        data () {
            return {
                env: process.env.NODE_ENV,
                username: '',
                password: '',
                status: false // 滑块状态
            }
        },
        components: {
            JcRange
        },
        computed: {},
        watch: {
            username () {
                this.status && this.$refs.verify.reset()
            },
            password () {
                this.status && this.$refs.verify.reset()
            }
        },
        methods: {
            ...mapMutations({
                setSource: 'source',
                setTags: 'tags'
            }),
            successFun () {
                this.status = true
            },
            errorFun () {
                this.status = false
            },
            resetRange () {
                this.$refs.verify.reset()
            },
            handleLogin () {
                // 登入
                if (this.username.trim() === '') {
                    this.$message.error('请填写用户名！')
                    return false
                }
                if (this.password.trim() === '') {
                    this.resetRange()
                    this.$message.error('请填写密码！')
                    return false
                }
                if (!this.status) {
                    this.$message.error('请验证滑动！')
                    return false
                }
                let menuObj = [
                    {
                        buttonCode: null,
                        children: [],
                        id: 1,
                        name: '首页',
                        pid: 0,
                        resourceType: '1',
                        route: '/main',
                        selected: true
                    },
                    {
                        buttonCode: null,
                        children: [],
                        id: 2,
                        name: '测试',
                        pid: 1,
                        resourceType: '1',
                        route: '/demo',
                        selected: true
                    }
                ]
                session.set('authorities', menuObj)
                this.$router.push({ path: '/main' })
                let firstTag = [
                    {
                        route: '/main',
                        name: '首页'
                    }
                ]
                session.set('tags', firstTag)
                this.setTags(firstTag)
            }
        }
    }
</script>
<style scoped>
@import "../../assets/css/login.css";
</style>
